<template>
	<view class="container">
		<view class="h">
			<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30 bg-color">
				<view class="u-m-r-10 u-flex-1">
					<view class="header-text"> {{year}} {{year_str}}</view>
				</view>
				<view class="u-m-r-10 u-flex-1">
					<view class="header-text">{{income_str}}</view>
				</view>
				<view class="u-m-r-10 u-flex-1">
					<view class="header-text"> {{expenditure_str}}</view>
				</view>
			</view>
			<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30 bg-color">
				<view class="u-m-r-10 u-flex-1">
					<view class="header-content">
						<view class="header-children" @click="clickDate">
							<view class="header-children header-content-2x">{{month}}</view>
							<view class="header-children">{{month_str}}</view>
							<view class="header-children">
								<u-icon class="header-children header-icon" name="arrow-down-fill" color="#323232" size="30"></u-icon>
							</view>
						</view>
						
						<view class="header-children" style="margin: 0;
						padding-left: 50rpx;
						border-right-width: 1px;
						border-right-style: solid;
						height: 50rpx;
						transform: scaleX(0.5);
						border-color: #0c0c0c;">
							
						</view>
					</view>
				</view>
				<view class="u-m-r-10 u-flex-1">
					<view>
						<view class="header-children header-content-2x"> {{income_int}} </view>
						<view class="header-children"> .{{income_decimal}} </view>
					</view>
				</view>
				<view class="u-m-r-10 u-flex-1">
					<view>
						<view class="header-children header-content-2x"> {{expenditure_int}} </view>
						<view class="header-children"> .{{expenditure_decimal}} </view>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="list.length > 0">
			<scroll-view
			scroll-y="true" 
			:style="{height:scroll_view_height+'px'}" 
			refresher-enabled="true"
			:refresher-triggered="refresherTriggered"
			@refresherrefresh="refresher()"
			@refresherrestore="refresherrestore()"
		    @refresherabort="refresherabort()">
				<view>
					<view v-for="(item, index) in list" :key="index">
						<view class="u-flex list-box">
							<view class="u-m-r-10 u-flex-1">
								<view class="header-text"> {{item.time}} {{item.week}}</view>
							</view>
							<view class="u-m-r-10 u-flex-1">
								<view class="header-text">{{income_str}} {{item.income}}</view>
							</view>
							<view class="u-m-r-10 u-flex-1">
								<view class="header-text">{{expenditure_str}} {{item.expenditure}}</view>
							</view>
						</view>
						
						<view class="list-box-children" v-for="(item1, index1) in item.list" :key="index1" @click="toDetail(item1)">
							<view class="u-flex">
								<image slot="icon" class="box-icon" :src="item1.icon" mode="" :lazy-load="lazy_load"></image>
							</view>
							<view class="box-left">
								{{item1.bill_type}}
							</view>
							<view class="box-desc">
								{{item1.desc}}
							</view>
							<view class="u-flex-1 box-right">
								{{item1.bill_money}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="is_show_emoty" :style="{height:scroll_view_height+'px'}">
			<u-empty text="暂无明细" mode="list"></u-empty>
		</view>
		
		<u-picker mode="time" v-model="picker_show" :params="picker_params" :default-time="picker_time" @confirm="pickerConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				picker_params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				picker_show: false,
				picker_time: "",
				
				phone_height: "0", // default:624
				scroll_view_height: "0", // default:546
				
				refresherTriggered: false,
			    _refresherTriggered: false,
				
				year_str: "年",
				month_str: "月",
				income_str: "收入",
				expenditure_str: "支出",
				
				year: "",
				month: "",
				
				income_sum: "0.00",
				income_int: "0",
				income_decimal: "00",
				
				expenditure_sum: "0.00",
				expenditure_int: "0",
				expenditure_decimal: "00",
				
				list : [
					{expenditure: "34.00",
					income: "0.00",
					list: [
						{bill_id: 1,
						bill_money: "-34.00",
						bill_type: "衣服",
						desc: "",
						icon: "../../static/type/1.png",
						id: 1,
						img_url: "",
						time: "03-05",
						}
					],
					time: "03月05日",
					week: "星期五",
					}
				],
				reload: false,
				
				is_show_emoty: false,
				lazy_load: true,
			}
		},
		methods: {
			clickDate(){
				this.picker_show = true;
			},
			pickerConfirm(e) {
				if (this.picker_params.year) this.year = e.year;
				if (this.picker_params.month) this.month = e.month;
				
				this.picker_time = this.year + "-" + this.month;
			},
			refresher(){
				console.log('下拉刷新');
				if(this._refresherTriggered){
					return;
				}
				this._refresherTriggered = true;
				if(!this.refresherTriggered){
					this.refresherTriggered = true;
				}
			},
			refresherrestore(){
				console.log("自定义下拉刷新被复位");
				this.refresherTriggered = false;
				this._refresherTriggered = false;
			},
			refresherabort(){
				console.log("自定义下拉刷新被中止");
				this.refresherTriggered = false;
				this._refresherTriggered = false;
			},
			formatSum(){
				let income_sum_arr = this.income_sum.split('.');
				this.income_int = income_sum_arr[0];
				this.income_decimal = income_sum_arr[1];
				
				let expenditure_sum_arr = this.expenditure_sum.split('.');
				this.expenditure_int = expenditure_sum_arr[0];
				this.expenditure_decimal = expenditure_sum_arr[1];
			},
			toDetail(e){
				console.log(e);
				
				uni.navigateTo({
				    url: '/pages/index/detail'
				});
				
				uni.$once('newPageOpen', (data) => {
				    console.log("接收事件newPageOpen成功,data=", data);
					uni.$emit('detailData',e);
					console.log('向新页面触发detailData数据',e);
				});
			}
		},
		onShow() {
			
		},
		onLoad(options){
			
			// 计算scroll-view高度
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					_this.phone_height = res.windowHeight
					let v = uni.createSelectorQuery().select(".h");
					v.boundingClientRect(data=>{
						_this.scroll_view_height = _this.phone_height - data.height;
					}).exec();
				}
			})
			
			let t = new Date().toISOString().slice(0, 10);
			let t_a = t.split("-");
			this.year = t_a[0] || "";
			this.month = t_a[1] || "";
			this.picker_time = this.year + "-" + this.month;
		}
	}
</script>

<style lang="scss">
	.container{
		background-color: #f7f7f7;
		
		.bg-color{
			background-color: #FDDC2D
		}
		.header-text{
			font-size: 25rpx;
			color: #7a7a7a;
		}
		.header-children{
			display: initial;
		}
		.header-content-2x{
			font-size: 40rpx;
		}
		.header-icon{
			padding: 15rpx;
		}
		
		.list-box{
			padding: 18rpx 18rpx 18rpx 40rpx;
		}
		.list-box-children{
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-orient: horizontal;
			-webkit-box-direction: normal;
			-webkit-flex-direction: row;
			flex-direction: row;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			position: relative;
			box-sizing: border-box;
			width: 100%;
			padding: 26rpx 32rpx;
			font-size: 28rpx;
			line-height: 50rpx;
			color: #606266;
			background-color: #fff;
			text-align: left;
			
			.box-icon{
				width: 50rpx;
				height: 50rpx;
				margin-right: 35rpx;
			}
			
			.box-left{
				width: auto;
				font-weight: 500;
				font-size: 28rpx;
			}
			
			.box-right{
				overflow: hidden;
				text-align: right;
				vertical-align: middle;
				color: #909399;
				font-size: 26rpx;
			}
			
			.box-desc{
				font-weight: 500;
				width: 300rpx;
				margin-left: 50rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				-ms-text-overflow: ellipsis;
				display: -webkit-box;
				line-clamp: 1;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
	}
	
	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}
</style>
